<template>
  <div class="noteFun">
    <div class="note">
      <div class="notetop">手记</div>
      <div class="noterigth">
        <span class="iconfont icon-xiaoxi"></span> 写一条
      </div>
    </div>
    <div class="scd"></div>
    <!--  -->
    <div class="notelist" v-for="item in lists" :key="item.id">
      <div class="notelisttop">
        <div class="img">
          <img :src="item.user.avatar + '?param=140y140'" />
        </div>
        <div class="middle">
          <div class="middleleft">
            <p class="middletop">{{ item.user.username }}</p>
            <p class="middletwo">12分钟前发布</p>
          </div>
          <div class="middlerigth">
            + 关注 <span class="iconfont icon-gengduo-shuxiang"></span>
          </div>
        </div>
      </div>
      <router-link tag="div" :to="'/ReviewList?id=' + item.id" class="message">
        <p class="messagetop">{{ item.title }}</p>
        <p class="messagetwo">{{ item.content }}</p>
      </router-link>
      <div class="photo">
        <div class="img" v-for="(num, index) in item.images" :key="index">
          <img :src="num + '?param=140y140'" />
        </div>
      </div>
      <div class="notelistbottom">
        <div class="iconfont icon-dianzan">
          <span></span> {{ item.count.count_liked }}
        </div>
        <div class="iconfont icon-pinglun">
          <span></span> {{ item.count.count_commented }}
        </div>
        <div class="iconfont icon-fenxiang">
          <span></span> {{ item.count.count_shared }}
        </div>
      </div>
    </div>
    <!-- 加载中 -->
    <div class="spinner" v-if="!lists">
      <van-loading type="spinner" size="30px" />
    </div>
  </div>
</template>

<script>
import { getnote, getnotes } from "../api/home";
export default {
  data() {
    return {
      lists: "",
      notes: null,
    };
  },
  methods: {
    //手记手记内容详情
    getnoteFun() {
      getnote({ noteId: this.notes }).then((data) => {
        console.log("精选列表", data);
      });
    },
    // 手记精选列表
    getnotesFun() {
      getnotes({}).then((data) => {
        // console.log(data, "手记内容详情");
        this.lists = data.data.list;
        // console.log(this.lists);
      });
    },
  },
  mounted() {
    // this.getnoteFun(); //手记数据
    this.getnotesFun(); //精选列表
  },
};
</script>

<style lang="less" >
.noteFun {
  width: 100%;
  background-color: #f3f4f6;
  .note {
    width: 100%;
    background-color: #fff;
    position: fixed;
    top: 0px;
    left: 0px;
    .notetop {
      width: 100%;
      height: 43px;
      line-height: 43px;
      text-align: center;
      font-size: 18px;
      color: black;
      font-weight: 600;
    }
    .noterigth {
      position: fixed;
      top: 10px;
      right: 0px;
      margin-right: 12px;
      background-color: #fdedeb;
      color: #e95b4c;
      padding: 4px 9px 4px 9px;
      border-radius: 10px;
      font-size: 12px;
      font-weight: 600;
      .iconfont {
        font-size: 16px;
      }
    }
  }
  .scd {
    width: 100%;
    height: 43px;
  }
  .notelist {
    width: 100%;
    background-color: #fff;
    margin-top: 7px;
    .notelisttop {
      display: flex;
      margin-left: 12px;
      padding-top: 12px;
      height: 34px;
      .img {
        width: 34px;
        height: 34px;
        margin-right: 10px;
        img {
          width: 34px;
          height: 34px;
          border-radius: 50%;
        }
      }
      .middle {
        flex: 1;
        display: flex;
        justify-content: space-between;
        .middleleft {
          display: flex;
          flex-direction: column;
          .middletop {
            font-size: 14px;
            height: 14px;
            line-height: 18px;
          }
          .middletwo {
            font-size: 12px;
            color: #b3b9c2;
            height: 12px;
            line-height: 12px;
            margin-top: 6px;
          }
        }
        .middlerigth {
          height: 34px;
          line-height: 34px;
          color: #e95b4c;
          font-size: 12px;
          font-weight: 600;
          margin-right: 10px;
          .iconfont {
            color: #acb2bc;
            font-size: 12px;
            margin-left: 10px;
          }
        }
      }
    }
    .message {
      margin: 10px 12px 10px 12px;
      .messagetop {
        font-size: 15px;
        font-weight: 800;
        color: #0e1524;
      }
      .messagetwo {
        display: -webkit-box; /*将对象转为弹性盒模型展示*/
        -webkit-box-orient: vertical; /*设置弹性盒模型子元素的排列方式*/
        -webkit-line-clamp: 3; /*限制文本行数*/
        overflow: hidden; /*超出隐藏*/
        font-size: 14px;
        font-weight: 400;
        color: #36404c;
      }
    }
    .photo {
      width: 100%;
      overflow: hidden;
      display: flex;
      padding-bottom: 10px;
      border-bottom: 2px solid #f3f3f5;
      .img {
        width: 113px;
        height: 113px;
        margin: 10px 8px 0px 0px;

        &:last-of-type {
          margin-right: 0px;
        }
        &:first-of-type {
          margin-left: 12px;
        }
        img {
          width: 113px;
          height: 113px;
          border-radius: 5px;
        }
      }
    }
    .notelistbottom {
      display: flex;
      height: 32px;
      line-height: 32px;
      justify-content: space-around;
      .iconfont {
        font-size: 14px;
      }
    }
  }
  .spinner {
    position: fixed;
    top: 48%;
    left: 48%;
  }
}
</style>